iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1

2D Transform

transform可以讓html元素(包含內容)被位移旋轉縮放傾斜
分為2D和3D,今天先來介紹2D吧~

瀏覽器支援情形
https://ithelp.ithome.com.tw/upload/images/20181021/20111500OJ7LzXWK4O.png
圖片來源:https://www.w3schools.com/css/css3_2dtransforms.asp

Transform-origin元素的原始位置(參考點)

  • elememt(x,y)
  • 位移、旋轉、縮放、傾斜的參考點
  • x、y可為尺寸值 或 % (百分比) 或方位關鍵字;% 是以元素本身大小作為計算基準。
  • 預設值為元素中心點(50%,50%)
  • 元素左上角座標為(0,0)
  • 方位關鍵字(center,top,right,bottom,left),如忽略第二個值,則自動定為center
transform-origin:50px 20px;   /* 尺寸值 */
/* 或者是 */
transform-origin:left;  /* 方位關鍵字 */

[補充]:元素預設座標系統預設位置為左上角(0,0),主要用來排版;transform的預設值為(50%,50%),主要用來做動畫效果,大家不要搞混喔~

Transform屬性

transform 屬性可能被指定為關鍵字值none或一或多個transform-function值,預設值為none

transform:none; /* none */
/* 或者是 */
transform:translateX(2px);  /* transform-function */

以下為transform-function介紹:

  • 長度[參數:m,單位:尺寸值 或%,如使用%,是以元素本身大小作為計算基準]
  • 角度[參數:θ,單位:deg]
  • 倍率[參數:s,單位:無]
  • 數值[參數:n,單位:無]
函數 說明
translate(mx,my) 位移,元素以參考點為中心,X軸位移mx距離,Y軸位移my距離,如果只寫一個參數,省略的第 2個參數會視為0,也就是只有X軸的mx距離
translateX(m) 元素以參考點為中心,X軸位移m距離
translateY(m) 元素以參考點為中心,Y軸位移m距離
scale(sx,sy) 縮放,元素以參考點為中心,X軸縮放s倍,Y軸縮放s倍,如果只寫一個參數,就是X、Y軸以同樣倍率縮放
scaleX(s) 元素以參考點為中心,X軸縮放s倍
scaleY(s) 元素以參考點為中心,Y軸縮放s倍
rotate(θ) 從參考點為中心軸旋轉θ度,正值=順時針旋轉,負值=逆時針旋轉
skew(θx,θy) 元素以參考點為中心,X軸傾斜θx度,Y軸傾斜θy度,如只寫一個,就只有X軸的傾斜。
skewX(θ) 元素以參考點為中心,X軸的傾斜θ度
skewY(θ) 元素以參考點為中心,Y軸的傾斜θ度
matrix(n,n,n,n,n,n) 元素以參考點為中心,依變形矩陣的6個參數值產生2D變形,matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()),可參考https://www.jianshu.com/p/52e0018e6ce2

Transform屬性說明

(以下紅色點為參考點)

  • translate():
    • 說明:位移,元素以參考點為中心進行2D位移
    • 單位:尺寸值或百分比
    • 單個參數:如果只寫一個參數,省略的第2個參數會視為0,也就是只有X軸的移動距離
    • 可細分為X軸與Y軸的位移,屬性如下:translateX() translateY()
.box{
transform:translate(20px,30px);
/*其他CSS屬性省略*/
}

  • scale():
    • 說明:縮放,元素以參考點為中心進行2D縮放
    • 單位:無,為純數值倍率
    • 單個參數:如果只寫一個參數,就是X、Y軸以同樣倍率縮放
    • 可細分為X軸與Y軸的縮放,屬性如下:scaleX()scaleY()
.box{
transform:scale(1,2);
transform-origin:top left;
/*其他CSS屬性省略*/
}

  • rotate():
    • 說明:旋轉,元素以參考點為中心進行旋轉
    • 單位:deg,正值=順時針旋轉,負值=逆時針旋轉
.box{
transform:rotate(30deg);
transform-origin:top left;
/*其他CSS屬性省略*/
}

  • skew():
    • 說明:傾斜,元素以參考點為中心進行傾斜
    • 單位:deg
    • 單個參數:如只寫一個,就只有X軸的傾斜
    • 可細分為X軸與Y軸的傾斜,屬性如下:skewX()skewY()
.box{
transform:skew(30deg,10deg);
transform-origin:top left;
/*其他CSS屬性省略*/
}

  • matrix():元素以參考點為中心,依變形矩陣的6個參數值產生2D變形,matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

同一元素套用多個變形函數

  • 函數間以半形空格間隔即可
.box{
transform:translate(120px) rotate(80deg) scale(0.5);
}

~不專業學習筆記,如有疑問或是錯誤,歡迎不吝指教~

參考來源:
[1] https://www.w3schools.com/css/css3_2dtransforms.asp
[2] https://eyesofkids.gitbooks.io/css3/content/contents/transform2d.html
[3] http://boohover.pixnet.net/blog/post/35341387-%E6%97%8B%E8%BD%89%E3%80%81%E5%82%BE%E6%96%9C%E3%80%81%E7%B8%AE%E6%94%BE%E7%9A%84%E8%AE%8A%E5%BD%A2%E6%95%88%E6%9E%9C-transform-%28css-prope


上一篇
CSS動畫-Animation(四)(keyframes)
下一篇
CSS動畫-3D Transform
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言